<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>

		<script src="https://unpkg.com/vue@next"></script>
	</head>

	<body>
		<div id="app">
		  <p>原始字符串: {{ message }}</p>
		  <p>计算后反转字符串: {{ reversedMessage }}</p>
		  <p>使用 methods 计算后反转字符串: {{ reversedMessage2() }}</p>
		</div>
	</body>
	<script>
		//view model
		const app = {
		  data() {
		    return {
		      message: 'RUNOOB!!'
		    }
		  },
		  computed: {
		    // 计算属性的 getter
		    reversedMessage: function () {
		      // `this` 指向 vm 实例
		      return this.message.split('').reverse().join('')
		    }
		  },
		  
		  methods: {
		      reversedMessage2: function () {
		        return this.message.split('').reverse().join('')
		      }
		    }
		}
		 
		const vm = Vue.createApp(app).mount('#app')
		vm.message = 'xunyan'
		console.log("vm",vm);
		vm.message = 'xu'
		console.log("vm",vm.message);
		
	</script>

</html>